<template class="body">
	
	<view class="page-container">
		<view class="page-background"></view>
		<view class="uni-padding-wrap uni-common-mt">
			
			<view class="uni-flex uni-column">
				<view  class="avatar-container uni-flex uni-row">
					<image src="../../../static/img/album/avatar.svg" class="avatar uni-align-center"></image>
				</view>
				<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
					<!-- <view class="user-name">王秀凤</view> -->
					<view class="user-name">Jane</view>
				</view>
				
				<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
					<!-- <view class="user-hometown">江苏南京</view> -->
					<view class="user-hometown">San francisco</view>
				</view>
				
				
				<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
					
					<view class="text">
						<button class="add-img-button" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-release/tabbar-3-release')">
							<!-- <image src="../../../static/img/album/add_image.svg" class="add-img-button-svg"></image> -->
						</button>
						
					
						
					</view>
					
				</view>
			</view>
			
			<view v-for="(stageInfo,stageIndex) in stageInfos" class="uni-flex uni-column stage-container">
				<view class="uni-flex uni-row stage-item" @click="changeStage(stageIndex)">
				  <!-- A部分，宽度占比自定义 -->
				  <view class="uni-flex uni-column uni-justify-center uni-align-center" style="flex: 1; -webkit-justify-content: center;">
				    <!-- 童年 -->
				    <view class="stage-head-text">{{stageInfo.stage_name}}</view>
				    <!-- 1975 -->
				    <view class="stage-head-text">{{stageInfo.time}}</view>
				  </view>
				  <!-- B部分，垂直居中的文字，宽度占比自定义 -->
				  <view class="text uni-flex" style="-webkit-flex: 1;flex: 4;height: 100%;-webkit-justify-content: center;justify-content: flex-start;-webkit-align-items: center;align-items: center;">
				  	<text style="text-align: left;">{{stageInfo.description}}</text>
				  </view>
				  <!-- C部分，一个图片，向左移动一点 -->
				  <view class="uni-flex uni-align-center uni-justify-center" style="flex: 1; margin-right: 20rpx; height: 200rpx; -webkit-align-items:center">
				    <image class="stage-cover-img uni-align-center uni-justify-center" :src="stageInfo.img_url" :mode="imgDisplayMode"></image>
				  </view>
				</view>
				
				<view class="pics-container">
					<view v-if="curStage === stageIndex" v-for="(picItem, index) in pics[stageIndex]" 
					class="pic-item uni-flex uni-row" @click="goToEditPage(picItem.id, picItem.url, picItem.description, picItem.stage_name, picItem.time)">
						<view class="pic uni-flex uni-align-center uni-justify-center" style="flex: 1; margin-right: 20rpx; height: 100%; -webkit-align-items:center">
						  <image class="pic-img uni-align-center uni-justify-center" :src="picItem.url" :mode="imgDisplayMode"></image>
						</view>
						
						<view class="pic-detail uni-flex uni-row" style="flex: 3; ">
							
							<!-- B部分，垂直居中的文字，宽度占比自定义 -->
							<view class="text uni-flex uni-column" style="-webkit-flex: 1;flex: 8;height: 100%;">
								<view class="pic-story">
									{{picItem.description}}
								</view>
								<view class="text-badge" style="flex:1">{{picItem.time}}</view>
							</view>
							
							<view class="uni-flex uni-column uni-justify-center uni-align-center" style="flex: 1; -webkit-justify-content: center;">
							  <!-- 童年 -->
							  <view class="pic-stage">{{stageInfo.stage_name}}</view>
							</view>
							
						</view>
						
					</view>
				</view>
			</view>
		    
			
			
		</view>
	</view>
	
    
</template>

<script>
	import {server_url} from '@/web_config/config.js'
	
    export default {
        data() {
            return {
				curStage:-1,
				imgDisplayMode:"aspectFit",
                pics: [[{
					url:'https://dummyimage.com/50x32/000/fff.png',
					description:'家里养的第一只小狗，名字叫做Lucky，妈妈希望它能够给我们家带来更多幸运。',
					time:'1978.04',
					stage:'童年'
				},
				{
					url:'https://dummyimage.com/500x320/000/fff.png',
					description:'家里养的第一只小狗，名字叫做Lucky，妈妈希望它能够给我们家带来更多幸运。',
					time:'1978.04',
					stage:'童年'
				},
				{
					url:'https://dummyimage.com/4200x3400/000/fff.png',
					description:'带来更多幸运。',
					time:'1978.04',
					stage:'童年'
				},
				{
					url:'https://dummyimage.com/3400x4200/000/fff.png',
					description:'家里养的第一只小狗，名字叫做Lucky，妈妈希望它能够给我们家带来更多幸运。',
					time:'1978.04',
					stage:'童年'
				},
				]
				],
				stageInfos: [{
					img_url:'https://dummyimage.com/500x320/000/fff.png',
					description:'出生于旧金山，铁道医院3号床，那天下着雪。',
					time:'1995',
					stage_name:'童年'
				},
				{
					img_url:'https://dummyimage.com/500x320/000/fff.png',
					description:'在旧金山第一小学上六年级，第一次和男生恋爱。',
					time:'2005',
					stage_name:'少年'
				}
]
				
            }
        },
        onLoad() {
			this.getStageInfos();
			let index = 0;
			for (let stageInfo of this.stageInfos) {
				console.log(stageInfo.stage_name)
				console.log(stageInfo.time)
				console.log(index);
				index+=1;
			}
			
        },
		mounted() {
			console.log("mount好了")
		},
		onShow() {
			console.log("出现");
			// 每次出现复原
			this.curStage = -1;
			// todo :暂写为每次都全量更新，待修改为使用vuex判断是否需要更新以及更新哪个阶段
			let index = 0;
			for (let stageInfo of this.stageInfos) {
				this.getPicInfos(stageInfo.stage_name, index);
				index+=1;
			}
		},
        methods: {
			changeStage(stage){
				if (this.curStage === stage) {
					this.curStage = -1;
				}else {
					this.curStage = stage;
				}
			},
			getAllPicInfos(){
				
			},
			getStageInfos(){
				uni.request({
					url: server_url + '/life_stage',
					data:{
						user_id: 1
					}, 
					success: (res) => {
						console.log(res);
						this.stageInfos = res.data;
						this.pics[2] = res.data;
						let index = 0;
						for (let stageInfo of this.stageInfos) {
							this.getPicInfos(stageInfo.stage_name, index);
							index+=1;
						}
						
						this.getPicInfos("现在", 3);
					}
				})
			},
			getPicInfos(stage_name, index){
				uni.request({
					url: server_url + '/memory',
					data:{
						user_id: 1,
						stage_name: stage_name,
					}, 
					success: (res) => {
						console.log(res);
						this.pics[index] = res.data;
						
					}
				})
			},
			goToEditPage(id, url, description, stage_name, time) {
				
				let tt = `ada${time}`
				console.log(tt)
				
				// 使用URLSearchParams构造query对象
				let searchParams = new URLSearchParams();
				searchParams.append('id', id);
				searchParams.append('url', url);
				searchParams.append('description', description);
				searchParams.append('stage_name', stage_name);
				searchParams.append('time', time);
				
				console.log(searchParams.toString());
				
				// 使用searchParams.toString()获取格式化后的query字符串
				
				this.goToPage(`/pages/memory/edit?${searchParams.toString()}`);
				
				
			},
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			}
            
        }
    }
</script>

<style>
@import "../../../common/uni.css";

.page-background {
	background-image: url(@/static/img/album/background.jpg);
	background-size: cover;
	background-position: center;
	  background-attachment: fixed;
	  height: 100%;
	  width: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: -1;
}	

.avatar-container {
	width: 100%;
	height: 240rpx;
	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	
}

.avatar {
	height: 150rpx;
	width: 150rpx;
	border-radius: 50%;
	margin-bottom: -20rpx;
	/* align-content: center;
	justify-content: center; */
	object-fit: contain; /* 保持图片比例，确保图片完全显示在容器内 */
	
}

.user-name {
	/* font: Comfortaa; */
	font-size: 50rpx;
	line-height: 80rpx;
	/* color: rebeccapurple; */
}

.user-hometown {
	font-size: 35rpx;
	line-height: 80rpx;
}

.add-img-button{
	height: 50rpx;
	width: 50rpx;
	background-image: url('../../../static/img/album/add_image.svg');
	background-size: cover; /* 或者可以使用 contain 根据需要 */
	  background-position: center; /* 水平居中 */
	  background-repeat: no-repeat;
}

.stage-item {
	background: rgba(217, 217, 217, 1);


	border-radius: 30rpx;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	height: 200rpx;
	
	
	.stage-head-text {
		/* 童年 1995 */
		
		margin-top: 35rpx;
		
		
		font-family: 'Comfortaa';
		font-style: normal;
		font-weight: 600;
		font-size: 36rpx;
		
		
		text-align: center;
		justify-items: center;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		
		color: #000000;
		

	}
	
	.stage-cover-img {
		width: 100%;
		height: 120rpx;
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		justify-content: center; align-items: center;
	}
}

.pic-item {
	height: 200rpx;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	
	.pic-img {
		
		width: 100%;
		height: 100%;
		justify-content: center; align-items: center;
	}
}

.pic-detail {
	height: 200rpx; 
	-webkit-align-items:center;
	
	background: rgba(255, 255, 255, 0.85);
	border-radius: 30rpx;
		
	.pic-story {
		text-align: left; 
		color: rgba(69, 68, 68, 1);
		align-content: center;
		flex: 3;
	}	
	
	.text-badge {
		color: black;
		text-align: right;
		
	}
	
	.pic-stage {
		font-family: Comfortaa;
		font-size: 16px;
		font-weight: 600;
		line-height: 17.84px;
		letter-spacing: 0.02em;
		text-align: center;

	}
	
}



/* 设置页面的背景图片，并固定背景 */
.body {
  background-image: url('../../../static/logo.png');
  background-size: cover; /* 背景图片覆盖整个页面 */
  background-attachment: fixed; /* 背景图片固定，不随页面滚动 */
  background-position: center center; /* 背景图片居中显示 */
}

/* 添加模糊效果 */
.body {
  filter: blur(10px); /* 根据需要调整模糊程度 */
}

</style>
